<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
    <clr-dg-action-bar>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary" (click)="onCreate()">
                <clr-icon shape="plus" size="16"></clr-icon>
                {{"APP_ADD"|translate}}
            </button>
            <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" [disabled]="selected.length !== 1">
                <clr-icon shape="close" size="16"></clr-icon>
                {{"APP_DELETE"|translate}}
            </button>
        </div>
        <button type="button" class="btn btn-sm" (click)="onSync()" [disabled]="selected.length < 1">
            <clr-icon shape="sync" size="16"></clr-icon>
            {{"APP_SYNC"|translate}}
        </button>
    </clr-dg-action-bar>
    <clr-dg-column>{{"APP_NAME"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_TYPE"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_STATUS"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_CREATED_DATE"|translate}}</clr-dg-column>
    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
        <clr-dg-cell>{{item.name}}</clr-dg-cell>
        <clr-dg-cell>{{item.type}}</clr-dg-cell>
        <clr-dg-cell>
            <span *ngIf="item.status === 'Initializing' || item.status === 'Terminating'">
                <a href="javascript:void(0)" (click)="onShowLogger(item)">{{item.status|translate}}</a>
            </span>
            <clr-spinner clrAssertive clrInline *ngIf="item.status === 'Initializing' || item.status === 'Terminating' || item.status === 'Waiting' || item.status === 'Synchronizing'">
                Loading...
            </clr-spinner>
            <span *ngIf="item.status === 'Running' || item.status === 'Synchronizing' || item.status === 'Waiting'">
                {{item.status|translate}}
            </span>
            <span *ngIf="item.status === 'NotReady' || item.status === 'Failed'">
                <a href="javascript:void(0)" (click)="openMessage(item)">{{item.status|translate}}</a>
            </span>
        </clr-dg-cell>
        <clr-dg-cell>{{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>

    </clr-dg-footer>
</clr-datagrid>

<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'" clrModalClosable="true">
    <h3 class="modal-title">{{"APP_EVENT_DETAIL"|translate}}</h3>
    <div class="modal-body">
        <p>{{detailItem.message | errFormat}}</p>
    </div>
</clr-modal>
